<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <!--<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />-->
    <link rel="stylesheet" data-th-href="@{/css/font.css}">
    <link rel="stylesheet" data-th-href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" data-th-src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" data-th-src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
    <!--<span class="layui-breadcrumb">-->
    <!--<a href="">首页</a>-->
    <!--<a href="">演示</a>-->
    <!--<a>-->
    <!--<cite>导航元素</cite></a>-->
    <!--</span>-->
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<form id="dataForm" data-th-action="@{/account/getlist}" class="layui-form layui-col-md12 x-so">
    <div class="x-body">
        <div class="layui-row">
            <input type="text" name="queryContent" placeholder="名称关键字查询" autocomplete="off" class="layui-input" data-th-value="${queryContent}">
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
            <input type="hidden" name="pageNum" id="pageNum">
        </div>
        <xblock>
            <a class="layui-btn layui-btn-danger batchDel" href="javascript:(0)"><i class="layui-icon"></i>批量删除</a>
            <a class="layui-btn" data-th-href="@{/account/toadd}"><i class="layui-icon"></i>添加</a>
            <span class="x-right" style="line-height:40px">共有数据:<span data-th-text="${total}"></span></span>
        </xblock>
        <table class="layui-table">
            <thead>
            <tr>
                <th>
                    <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose">
                </th>
                <th>用户名</th>
                <th>昵称</th>
                <th>站点</th>
                <th>角色</th>
                <th>操作</th>
            </thead>
            <tbody>
            <tr data-th-each="account:${list}">
                <td>
                    <input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose"
                           data-th-value="${account.id}">

                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                        <i class="layui-icon"></i>
                    </div>
                </td>
                <td data-th-text="${account.username}"></td>
                <td data-th-text="${account.nickName}"></td>
                <td data-th-text="${account.site.id}"></td>

                <td data-th-if="${account.role==1}">站点管理员</td>
                <td data-th-if="${account.role==0}">系统管理员</td>

                <td class="td-manage">
                    <a title="编辑" data-th-href="@{/account/toedit(accountId=${account.id})}">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="page" th:include="page :: page"></div>
    </div>
</form>
<script>
    layui.use(['form'], function () {
        var form = layui.form;

        /**
         * 批量删除
         */
        $(".batchDel").click(function () {
            var $checkbox = $('tbody input[type="checkbox"][name="checked"]');
            var $checked = $('tbody input[type="checkbox"][name="checked"]:checked');
            if ($checkbox.is(":checked")) {
                layer.confirm('确定删除选中的信息？', {icon: 3, title: '提示信息'}, function (index) {
                    var index = layer.msg('删除中，请稍候', {icon: 16, time: false, shade: 0.8});
                    var ids = "";
                    //删除数据
                    for (var i = 0; i < $checked.length; i++) {
                        if (i == $checked.length) {
                            ids += $checked[i].value;
                        } else {
                            ids += $checked[i].value + ",";
                        }
                    }
                    var url = "/account/del";
                    var data = {
                        ids: ids
                    };
                    setTimeout(function () {
                        $.ajax({
                            type: "get",
                            url: url,
                            data: data,
                            dataType: "json",
                            success: function (result) {
                                layer.close(index);
                                layer.msg(result.message);
                                if (result.code == 0) {//成功  并刷新页面
                                    setTimeout(function () {
                                        location.reload();
                                    }, 1000)
                                }
                            }
                        });
                    }, 1000);
                })
            } else {
                layer.msg("请选择需要删除的活动");
            }
        })


        //全选
        form.on('checkbox(allChoose)', function (data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        //通过判断是否全部选中来确定全选按钮是否选中
        form.on("checkbox(choose)", function (data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
            var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
            if (childChecked.length == child.length) {
                $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
            } else {
                $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
            }
            form.render('checkbox');
        })

    });
</script>
</body>

</html>